import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

import 'package:get/get.dart';

import '../../../../components/bottom11/bottom_app_bar_11.dart';
import '../controllers/bottom11_controller.dart';

class Bottom11View extends GetView<Bottom11Controller> {
  const Bottom11View({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:
      AppBar(title: const Text('拉面菜单'), centerTitle: true, elevation: 0),
      body: Stack(
        children: [
          content(),
          bottomBar(),
        ],
      ),
    );
  }

  Widget content() {
    return Obx(() {
      return AnimationLimiter(
        key: UniqueKey(),
        child: GridView.builder(
          itemCount: 22,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2 + (controller.pageIndex.value % 3),
              crossAxisSpacing: 4,
              mainAxisSpacing: 4,
              childAspectRatio: 1),
          itemBuilder: (context, index) {
            final bg = controller.bgs[Random().nextInt(3)];
            return AnimationConfiguration.staggeredGrid(
              position: index,
              columnCount: 22,
              duration: const Duration(milliseconds: 500),
              child: ScaleAnimation(child: Container(color: bg)),
            );
          },
        ),
      );
    });
  }

  Widget bottomBar() {
    return Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      child: BottomAppBar11(
        iconList: controller.iconList,
        selectedPosition: 0,
        selectedCallback: (position) => controller.onClickBottomBar(position),
      ),
    );
  }
}
